<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>小说章节内容页</title>
    <style>
        .blogimg {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
    </style>
</head>

<body class="layui-bg-gray">
    <!--顶部导航栏-->
    <%@ include file="novelhead.jsp" %>

    <div class="layui-col-md8 layui-col-lg-offset2">
        <!--小说所属标签-->
        <div style="margin-top: 20px;">
            <span class="layui-breadcrumb" lay-separator=">">
                <a href="novelmain.action">首页</a>
                <a href="">玄幻频道</a>
                <a href="">${chapter.typename }</a>
                <a href="novel.action?novelid=${chapter.novelid }">${chapter.novelname }</a>
            </span>
        </div>
        <!--小说章节内容-->
        <div class="layui-card layui-row" style="margin-top: 40px;">
            <div class="layui-col-md10 layui-col-xs-offset1">
                <div class="layui-card-header" style="margin-top: 50px;">
                    <h1>
                        <b>${chapter.chaptername }</b>
                    </h1>
                    <div style="margin-top: 5px">
                        <a href="novel.action?novelid=${chapter.novelid }">
                            <img src="img/书名.jpg" style="width:15px;height: 15px;">${chapter.novelname }
                        </a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="authormain.action?userid=${chapter.userid }">
                            <img src="img/作家.jpg" style="width:15px;height: 15px;">${chapter.nickname }
                        </a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <a>
                            <img src="img/时间.jpg" style="width:15px;height: 15px;">${chapter.createtime }
                        </a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <c:if test="${loginuser != null }">
                        	<a href="addbooksroom.action?
                        	novelid=${chapter.novelid }&chapterid=${chapter.chapterid }
                			&userid=${loginuser.userid}">
                        		<b>+加入书架</b>
                        	</a>
                        </c:if>
                        <c:if test="${loginuser == null }">
                        	<a href="login.jsp"><b>+加入书架</b></a>
                        </c:if>
                    </div>
                </div>
                <div class="layui-card-body" style="margin-top: 50px;">
                    <h2 style="margin-bottom: 70px;">
                    ${chapter.textcontent }
                    </h2>
                    <div style="text-align: center;margin-bottom: 50px">
                        <span class="layui-breadcrumb" lay-separator="<h1 style='display:inline'>|</h1>">
                       		<c:if test="${chapter.ordernum > 1}">
	                            <a href="lastchap.action?novelid=${chapter.novelid }&ordernum=${chapter.ordernum }">
	                                <h1 style="display:inline;"><b>上一章</b></h1>
	                            </a>
                            </c:if>
                            <c:if test="${chapter.ordernum <= 1}">
                            	<a href="" style="pointer-events: none;">
	                                <h1 style="display:inline">上一章</h1>
	                            </a>
                            </c:if>
                            <a href="novel.action?novelid=${chapter.novelid }">
                                <h1 style="display:inline;"><b>目录</b></h1>
                            </a>
                            <c:if test="${chapter.ordernum < maxnum}">
	                            <a href="nextchap.action?novelid=${chapter.novelid }&ordernum=${chapter.ordernum }">
	                                <h1 style="display:inline;"><b>下一章</b></h1>
	                            </a>
                            </c:if>
                            <c:if test="${chapter.ordernum == maxnum}">
                            	<a href="" style="pointer-events: none;">
	                                <h1 style="display:inline">下一章</h1>
	                            </a>
                            </c:if>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!--评论列表-->
        <div class="layui-card">
            <div class="layui-card-header layui-bg-blue">评论</div>
            <div class="layui-card-body">
            	<c:forEach items="${review}" var="reviewlist" begin="0" end="4" varStatus="status">
	                <ul>
	                    <li><h3><b style="color:blue">${reviewlist.nickname}</b></h3></li>
	                    <li style="margin-left:70px"><b>${reviewlist.reviewcontent}</b></li>
	                    <li style="float:right;">${reviewlist.createtime}</li></br>
	                    <c:if test="${reviewlist.reply != null}">
		                    <li><b style="color:green">${chapter.nickname}</b></li>
		                    <li style="margin-left:70px"><b>${reviewlist.reply}</b></li>
	                    </c:if>
	                    <c:if test="${loginuser.userid == chapter.userid}">
		                    <li style="float:right">
		                    	<span onclick="reply()" id="span" style="color:green">回复</span>
		                    	<span onclick="noreply()" id="nospan" style="color:red;display:none;">取消</span>
		                    </li> 
	                    </c:if>
	                    <form class="layui-form" id="reply" style="display:none;"  method='post' action="reply.action?reviewid=${reviewlist.reviewid}
					                    &chapterid=${reviewlist.chapterid}">
							<textarea name="reply" placeholder="请输入内容" class="layui-textarea"></textarea>
							<button class="layui-btn" lay-submit lay-filter="formDemo">发送</button>
						</form>
	                </ul>
	                 
	                <hr class="layui-bg-blue">
                </c:forEach>
            </div>
        </div>
        <!--发表评论-->
        <div class="layui-card" style="margin-bottom:40px">
            <div class="layui-card-header layui-bg-blue">发表评论</div>
            <div class="layui-card-body">
                <form class="layui-form"  method='post' action="addreview.action?
                novelid=${chapter.novelid }&chapterid=${chapter.chapterid }
                &userid=${loginuser.userid}">
                    <div class="layui-form-item layui-form-text">
                        <div>
                        <c:if test="${loginuser==null}">
                            <a href="login.jsp">登录</a>
                            <a href="addnormaluser.jsp">注册</a>
                        </c:if>
                        <c:if test="${loginuser!=null}">
                            <span>用户:${loginuser.nickname}</span>
                        </c:if>
                        </div>
                        <div class="layui-form-item layui-form-text">
						    <div class="layui-input-block">
						      <textarea name="reviewtext" placeholder="请输入内容" class="layui-textarea"></textarea>
						    </div>
  						</div>
                        <div class="layui-form-item">
						    <div class="layui-input-block">
						    <c:if test="${loginuser==null}">
						    	<a href="login.jsp" class="layui-btn">
						    		发表评论
						    	</a>
						    </c:if>
						    <c:if test="${loginuser!=null}">
						    	<button class="layui-btn" lay-submit lay-filter="formDemo">发表评论</button>
						    </c:if>
						    </div>
  						</div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <%@ include file="foot.jsp" %>
    <script src="layui/layui.js"></script>
    <!--导航js-->
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;

            //…
        });
        function reply(){
        	document.getElementById("reply").style.display="block";
        	document.getElementById("span").style.display="none";
        	document.getElementById("nospan").style.display="block";
        }
        function noreply(){
        	document.getElementById("reply").style.display="none";
        	document.getElementById("span").style.display="block";
        	document.getElementById("nospan").style.display="none";
        }
    </script>
</body>

</html>